<template>
  <div class='container-subjects'>
    <el-card>
      <!-- 筛选 -->
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <el-form
            label-width="80px"
            inline
            size="small"
          >
            <el-form-item label="学科名称">
              <el-input
                v-model="reqParams.subjectName"
                placeholder="搜索关键字"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button
                type="primary"
                @click="search()"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <el-button
          style="float:right"
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="addSubjects"
        >新增学科</el-button>
        <el-col :span="6"></el-col>
      </el-row>
      <!-- 总计 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom:15px"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="subjects">
        <el-table-column
          label="序号"
          type="index"
        ></el-table-column>
        <el-table-column
          label="学科名称"
          prop="subjectName"
        ></el-table-column>
        <el-table-column
          label="创建者"
          prop="username"
        ></el-table-column>
        <el-table-column
          label="创建日期"
          width="160px"
        >
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay === 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          prop="twoLevelDirectory"
        ></el-table-column>
        <el-table-column
          label="标签"
          prop="tags"
        ></el-table-column>
        <el-table-column
          label="题目数量"
          prop="totals"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="240px"
        >
          <template slot-scope="scope">
            <el-link
              @click="toDiretory(scope.row)"
              type="primary"
              :underline="false"
            >学科分类</el-link>
            <el-link
              @click="toTags(scope.row)"
              type="primary"
              :underline="false"
            >学科标签</el-link>
            <el-link
              :underline="false"
              type="primary"
              @click="updateSubjects(scope.row.id)"
            >修改</el-link>
            <el-link
              :underline="false"
              type="primary"
              @click="delSubJect(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next,sizes, jumper"
        :total="total"
        :page-size="reqParams.pagesize"
        :current-page="reqParams.page"
        @current-change="changePager"
        @size-change="changeSize"
        :page-sizes="[5 ,10,15,20]"
      >
      </el-pagination>
      <!-- 每页条数的选择 5条 10条 20条每页 -->
      <!-- 监听页面页数改变 -->
    </el-card>
    <!-- 新增和修改弹层 -->
    <el-dialog
      :visible="showDialog"
      :title="showText"
      width="25%"
      @close="btnCancel"
    >
      <!-- 表单 -->
      <el-form
        ref="subjectsForm"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input
            v-model="formData.subjectName"
            style="width:90%"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model=" formData.isFrontDisplay"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <!-- 底部的确定和取消 -->
      <el-row
        slot="footer"
        type="flex"
        justify="end"
      >
        <el-col :span="12">
          <el-button
            size="small"
            @click="btnCancel"
          >取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="btnOK"
          >确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list as subjectsList, remove as subjectsDel, add as subjectsAdd, update as subjectsUpdate, detail as subjectsDetail } from '@/api/hmmm/subjects.js'
// export const detail = data => createAPI(`/subjects/${data.id}`, 'get', data)

export default {
  name: 'SubJectsPage',
  data () {
    return {
      // 筛选参数
      reqParams: {
        subjectName: null,
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      // 学科列表
      subjects: [],
      // 总条数
      total: 0,
      showDialog: false,
      formData: {
        subjectName: '', // 学科名称
        isFrontDisplay: '1'
      },
      rules: {
        subjectName: [{ required: true, message: '学科名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showText () {
      return this.formData.id ? '修改学科' : '新增学科'
    }
  },
  // 当组件初始化的时候 应该默认显示列表
  created () {
    this.getSubjects()
  },
  // 需要在methods中声明这个方法
  methods: {
    // 删除操作
    delSubJect (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await subjectsDel({ id })
        this.$message.success('删除成功')
        this.getSubjects()
      }).catch(e => { })
    },
    // 跳转到学科目录
    toDiretory (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'directorys', query: { id, name } })
    },
    // 跳转到标签
    toTags (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'tags', query: { id, name } })
    },
    // 获取学科列表
    async getSubjects () {
      // api目录中的函数和接口和数据相关 api函数都以对象的方式传递
      const { data } = await subjectsList(this.reqParams)
      this.subjects = data.items
      this.total = data.counts
    },
    // 分页方法
    changePager (newPage) {
      this.reqParams.page = newPage
      this.getSubjects()
    },
    // 尺码改变方法
    changeSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getSubjects()
    },
    // 搜索方法
    search () {
      this.reqParams.page = 1
      this.getSubjects()
    },
    // 清除功能
    clear () {
      this.reqParams = {
        subjectName: null,
        page: 1, // 页码
        pagesize: 10 // 每页条数
      }
    },
    // 添加学科
    addSubjects () {
      this.showDialog = true
    },
    btnOK () {
      this.$refs.subjectsForm.validate().then(async () => {
        // 校验成功
        if (this.formData.id) {
          return subjectsUpdate(this.formData)
        }
        await subjectsAdd(this.formData)
      }).then(() => {
        // 添加成功
        this.showDialog = false
        this.getSubjects()
        this.$message.success('操作成功')
      })
    },
    btnCancel () {
      // 重置数据
      this.formData = {
        subjectName: '', // 学科名称
        isFrontDisplay: '1'
      }
      // 移除校验
      this.$refs.subjectsForm.resetFields()
      this.showDialog = false
    },
    // 修改
    async updateSubjects (id) {
      // console.log(id);
      const { data } = await subjectsDetail({ id })
      // console.log(data);
      this.formData = data
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container-subjects {
  padding: 10px 15px;
  .pager {
    margin: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
.el-link {
  margin-right: 10px;
}
</style>
